<template>

  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="query.type" class="filter-item" placeholder="项目类型" style="width: 150px" clearable>
        <el-option v-for="item in xmTypes" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>

      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">
        查询
      </el-button>
      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="reset()">
        重置
      </el-button>
    </div>
    <iframe id="rIframe" :src="url" frameborder="0" style="width:100%;min-height:740px;height:auto;overflow-y:auto;" />

  </div>
</template>

<script>
import { getDictListByCode } from '@/api/dict'

export default {
  data() {
    return {
      query: {
        type: ''
      },
      xmTypes: [],
      initUrl: 'http://192.168.1.176:8084/report//share/share.html?_key=4bfb3e9ecdef428da694a7bc52c3425ebbfd02034c23e3c1839d44467f406183',
      url: ''
    }
  },
  created() {
    this.init()
    this.getDictList('CDS_XIANGMU_TYPE')
  },
  methods: {
    search() { // 查询
      this.init()
      var queryData = '&lx=' + this.query.type
      this.url = this.initUrl + queryData
    },
    getDictList(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_XIANGMU_TYPE') {
          this.xmTypes = response.data
        }
      })
    },
    reset() { // 重置
      this.query = {
        type: ''
      }
      this.init()
    },
    // 初始化url
    init() {
      this.url = this.initUrl
    }
  }
}
</script>

<style lang="less" scoped>
.app-container{
  padding:10px 20px;
}
.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .date-filter-item{
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
.pagination-container {
  margin-top: 0 !important;
  padding: 10px 16px !important;
}
</style>
